<template>
  <div class="body">
    <div class="cotainer">
      <!-- 头部占位符（防止内容被 fixed 头部遮挡） -->
      <div class="header-placeholder" v-if="param?.floatCard?.switch === '1'"></div>
      <!-- 固定头部 -->
      <div class="header" v-if="param?.floatCard?.switch === '1'">
        <img class="img" :src="staticService(param?.floatCard?.picture)"/>
        <div class="header-main">
          <span class="title">{{param?.floatCard?.title}}</span>
          <ul class="tags" v-if="param?.floatCard?.labels">
            <li v-for="item in param?.floatCard?.labels.split(',')">{{item}}</li>
          </ul>
        </div>
      </div>

      <div class="main-view">
        <!-- 顶部图片 -->
        <img  v-if="param?.topImg" :src="staticService(param?.topImg)"
              class="banner-img"/>

        <!-- 头部卡片 -->
        <div class="chart" v-if="param?.headCard?.switch === '1'">
          <img class="img-large" :src="staticService(param?.headCard?.picture)"/>
          <div class="chart-main">
            <span class="title">{{param?.headCard?.title}}</span>
            <ul class="tags" v-if="param?.headCard?.labels">
              <li v-for="item in param?.headCard?.labels.split(',')">{{item}}</li>
            </ul>
            <span>{{param?.headCard?.subtitle}}</span>
          </div>
        </div>

        <!-- 流程标题 -->
        <div class="hint-text">{{param?.processTitle}}</div>

        <!-- 聊天消息列表 -->
        <div class="chart-list">
          <!-- 开头欢迎语 -->
          <div class="item"  v-if="paramSet?.welcomeMsg" v-for="item in paramSet?.welcomeMsg?.msg">
            <img class="img" :src="staticService(param?.customerPicture)"/>
            <div class="content">
              <div class="content-header" v-if="param?.customer?.switch === '1'">
                <span class="username">{{param?.customer?.name}}</span>
                <span class="timestamp">{{getCurrentTime()}}</span>
              </div>
              <div class="message" :style="getMsgStyle(paramSet?.welcomeMsg?.fontColor, paramSet?.welcomeMsg?.fontWeight)">
              <span>
                {{item}}
              </span>
              </div>
            </div>
          </div>

          <!-- 对话问答 -->
          <div v-if="paramSet?.dialogContent" v-for="item in paramSet?.dialogContent?.content">
            <div class="item">
              <img class="img" :src="staticService(param?.customerPicture)"/>
              <div class="content">
                <div class="content-header" v-if="param?.customer?.switch === '1'">
                  <span class="username">{{param?.customer?.name}}</span>
                  <span class="timestamp">{{getCurrentTime()}}</span>
                </div>
                <div class="message" :style="getMsgStyle(item.fontColor, item.fontWeight)">
                  <span>{{item.title}}</span>
                  <!-- 对话按钮操作按钮 -->
                  <div class="btns">
                    <button v-for="answer in item.answers" :style="getDialogButtonStyle(paramSet?.dialogBtn)">{{answer.answer}}</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用户消息（右对齐） -->
            <div class="item right">
              <img class="img" :src="staticService(param?.touristPicture)"/>
              <div class="content">
                <div class="message">
                  <span>客户选择</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 结束内容 -->
          <div class="item"  v-if="paramSet?.endContent" v-for="item in paramSet?.endContent?.contents">
            <img class="img" :src="staticService(param?.customerPicture)"/>
            <div class="content">
              <div class="content-header" v-if="param?.customer?.switch === '1'">
                <span class="username">{{param?.customer?.name}}</span>
                <span class="timestamp">{{getCurrentTime()}}</span>
              </div>
              <div class="message" :style="getMsgStyle(paramSet?.endContent?.fontColor, paramSet?.endContent?.fontWeight)">
              <span>
                {{item.content}}
              </span>
              </div>
            </div>
          </div>

          <!-- 头部占位符（防止内容被 fixed 头部遮挡） -->
          <div class="header-placeholder" v-if="paramSet?.skipBtn?.text"></div>
          <!-- 跳转按钮 -->
          <div class="action-panel action-panel-ab" v-if="paramSet?.skipBtn?.text">
            <div class="action-panel_btns">
              <button :style="getSkipButtonStyle(paramSet?.skipBtn)">{{paramSet?.skipBtn?.text}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 定义 props
import { PageModeContent } from '@/api/bus/jqtSpreadLink/types';
import { DialogModeVo } from '@/views/bus/jqtSpreadLink/mode/dialogMode.vue';
import { DialogModeSetVo } from '@/views/bus/jqtSpreadLink/mode/dialogSetMode.vue';
import { getCurrentTime, staticService } from '@/utils/ruoyi';
const props = withDefaults(defineProps<{
  data?: PageModeContent;
}>(), {
  data: () => ({})
});
const param = ref<DialogModeVo>();
const paramSet = ref<DialogModeSetVo>();
onMounted(() => {
  param.value = props.data.dialog as DialogModeVo;
  paramSet.value = props.data.dialogSet as DialogModeSetVo;
});
watch(() => props.data, (newVal) => {
  param.value = props.data.dialog as DialogModeVo;
  paramSet.value = props.data.dialogSet as DialogModeSetVo;
}, { immediate: false, deep: true });

/**
 * 根据颜色（#xxx）和是否加粗（0/1）返回样式对象
 * @param color - 十六进制颜色，如 '#ff6600'
 * @param bold - 0 表示不加粗，1 表示加粗
 * @returns Record<string, string>
 */
const getMsgStyle = (color: string, bold: string): Record<string, string> =>{
  return {
    color: color,
    fontWeight: bold === '1' ? 'bold' : 'normal'
    // 可扩展其他样式
  };
}
/**
 * 生成对话按钮的样式
 * @param config dialogBtn 配置
 * @returns Record<string, string>
 */
function getDialogButtonStyle(config?: {
  frameColor?: string;
  btnColor?: string;
  fontColor?: string;
}): Record<string, string> {
  const style: Record<string, string> = {};

  if (!config) return style;

  // 边框
  if (config.frameColor) {
    style.borderColor = config.frameColor;
    style.borderWidth = '1px';
    style.borderStyle = 'solid';
  }

  // 背景颜色
  if (config.btnColor) {
    style.backgroundColor = config.btnColor;
  }

  // 字体颜色
  if (config.fontColor) {
    style.color = config.fontColor;
  }

  return style;
}

/**
 * 生成跳转按钮的样式（支持动画）
 * @param config skipBtn 配置
 * @returns Record<string, string>
 */
function getSkipButtonStyle(config?: {
  animation?: string; // '0' 无动画，'1' 放大缩小
  frameColor?: string;
  btnColor?: string;
  fontColor?: string;
}): Record<string, string> {
  const style: Record<string, string> = {};

  if (!config) return style;

  // 复用边框、背景、字体颜色
  if (config.frameColor) {
    style.borderColor = config.frameColor;
    style.borderWidth = '1px';
    style.borderStyle = 'solid';
  }
  if (config.btnColor) {
    style.backgroundColor = config.btnColor;
  }
  if (config.fontColor) {
    style.color = config.fontColor;
  }
  // 动画控制
  if (config.animation === '1') {
    style.animation = 'pulse 0.8s infinite';
  } else {
    style.animation = 'none';
  }

  return style;
}
</script>
<style scoped lang="scss">
.body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-view {
    transform: scale(0.9);
    transform-origin: top left;
    width: calc(100% / 0.9);
    box-sizing: border-box;
  }
  .cotainer {
    position: relative;
    max-width: 500px;
    background-color: #f5f5f5;
    margin: 0 auto;
  }

  /* ==================== 占位区域 ==================== */

  /* 用于为固定定位的 header 预留空间，避免内容被遮挡 */
  .header-placeholder {
    height: 90px;
  }

  /* ==================== 横幅图片样式 ==================== */

  /* 横幅图片：宽度100%，高度自适应 */
  .banner-img {
    width: 100%;
    height: auto;
    display: block; /* 去除图片下方默认空白 */
  }

  .header {
    display: flex;
    position: fixed;
    top: 8px;
    max-width: 500px;
    width: 105.5%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 15px;
    z-index: 999999;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, 0.2);
    border-radius: 30px 30px 0 0; // 新增
    transform: scale(0.9);
    transform-origin: top left;

    .img {
      width: 60px;
      height: 60px;
    }

    .title {
      font-size: 18px;
      font-weight: 600;
    }

    .header-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      margin-left: 10px;
      box-sizing: border-box;
      padding: 4px 0;
    }


    .tags {
      display: flex;

      li {
        margin: 0 8px 0 0;
        border-radius: 20px;
        padding: 1px 8px;
        border: 1px solid #aaaaaa;
        font-size: 13px;
        color: #999999;
        text-wrap: nowrap;
        overflow: hidden;
      }
    }
  }

  /* ==================== 图表卡片区域 ==================== */
  .chart {
    display: flex;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 15px;
    padding: 15px;

    /* 图表中的大图标 */
    .img-large{
      width: 90px;
      height: 90px;
    }

    .chart-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 0 0 10px;
      overflow: hidden;

      .title {
        font-size: 18px;
        font-weight: 600;
      }

      ul.tags {
        display: flex;
        align-items: center;
      }

      li {
        padding: 2px 5px;
        border: 1px solid #ed4c18;
        color: #ed4c18;
        border-radius: 2px;
        font-size: 13px;
        margin: 0 8px 2px 0;
        text-wrap: nowrap;
        overflow: hidden;
      }
    }
  }

  /* ==================== 提示文字区域 ==================== */

  /* “在线对话”提示文字 */
  .hint-text {
    margin: 20px 5px;
    font-size: 15px;
    color: #616060;
    text-align: center;
  }

  .chart-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 10px;
    box-sizing: border-box;
    height: auto;
    flex-shrink: 0;

    .item {
      display: flex;
      font-size: 14px;
      animation: myfirst .8s;

      .content {
        display: flex;
        flex-direction: column;
        line-height: 20px;
        margin: 0;
        overflow: hidden;
        max-width: calc(100% - 70px);
        flex: 1;

        .content-header {
          display: flex;
          align-items: center;
          padding: 0 0 12px 12px;

          /* 用户名样式 */
          .username {
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            margin-right: 10px;
          }

          /* 时间样式 */
          .timestamp {
            font-size: 14px;
            font-weight: 300;
            color: #999;
          }
        }

        .message {
          display: flex;
          flex-direction: column;
          line-height: 20px;
          margin: 0 12px 12px 10px;
          position: relative;
          overflow: hidden;
          border-radius: 5px;
          background-color: #ffffff;

          span {
            float: left;
            font-size: 15px;
            margin: 0 10px;
            line-height: 24px;
            max-width: calc(100% - 50px);
            padding: 10px;
            border-radius: 4px;
            position: relative;
            word-break: break-all;
            background: #fff;
          }

          span::before {
            position: absolute;
            top: 22px;
            transform: translate(-5px, -50%);
            left: 0;
            content: " ";
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid #FFFFFF;
            width: 0;
            height: 0;
          }
        }
      }

      .img {
        width: 40px;
        height: 40px;
        border-radius: 3px;
      }
    }

    .right {
      flex-direction: row-reverse;

      .content .message {

        flex: 1;
        display: flex;
        flex-direction: row;
        flex-direction: row-reverse;
        margin: 0 0 12px 12px;
        background-color: transparent;

        span {
          background-color: #95ec69;
        }

        span::before {
          display: none;
        }

        span::after {
          position: absolute;
          top: 22px;
          transform: translate(5px, -50%);
          right: 0;
          content: "";
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 8px solid #95ec69;
          width: 0;
          height: 0;
        }
      }
    }

    .btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 15px;

      button {
        width: 90%;
        cursor: pointer;
        margin: 0 0 10px;
        height: 40px;
        line-height: 40px;
        border-radius: 40px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        background-color: #28C76F;
        border: none;
      }
    }
  }

  .action-panel {
    position: fixed;
    height: auto;
    bottom: 0;
    width: 100%;
    max-width: 500px;
    background-color: #f5f5f5;
  }

  .action-panel-ab {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .action-panel_btns {
    height: auto;
    padding: 15px 15px 15px 15px;
    display: flex;
    margin: 0;
    grid-gap: 10px;
    grid-template-columns: repeat(var(--num), 1fr);
    animation: opacity .6s;

    button {
      background-color: #28C76F;
      list-style: none;
      padding: 10px 15px;
      font-size: 15px;
      color: #FFFFFF;
      border-radius: 5px;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      border: none;
    }
  }

  /* 特殊情况：只有一个按钮时，占满整行，居中 */
  .action-panel_btns button:only-child {
    width: 100%;
  }
}

@keyframes myFirst {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* 面板淡入动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5); /* 轻微放大，比如按钮呼吸感 */
  }
  100% {
    transform: scale(1);
  }
}
</style>
